<template>
  <div class="header">
    <div class="box">
      <el-icon><ShoppingCart color="white" size="number" /></el-icon>
      <div class="text">
        <span>订单量</span>
        <span>9204</span>
      </div>
    </div>
    <div class="box money">
      <el-icon><Aim color="white" size="number"/></el-icon>
      <div class="text">
        <span>浏览量</span>
        <span>929461</span>
      </div>
    </div>
    <div class="box num">
      <el-icon><Coin color="white" size="number"/></el-icon>
      <div class="text">
        <span>总金额</span>
        <span>￥382886</span>
      </div>
    </div>
  </div>
  <el-card>
    <div class="box_money">
      <div class="container" ref="echarts"></div>
        <div class="container" ref="echarts1"></div>
        
    </div>
    <div class="box_money">
      <div class="container" ref="echarts2"></div>
        <div class="container" ref="echarts3"></div>
    </div>
    
  </el-card>
  
</template>

<script >
import { onMounted } from '@vue/runtime-core';
// import {ref} from 'vue'
// import {toRefs} from 'vue'
import * as echarts from 'echarts';
import { reduce } from 'lodash';
export default {
mounted(){
  // 初始化echarts
  // var echarts=ref()
  let container=echarts.init(this.$refs.echarts)
  let container1=echarts.init(this.$refs.echarts1)
  let container2=echarts.init(this.$refs.echarts2)
  let container3=echarts.init(this.$refs.echarts3)

  // 设置x轴数据
  let xData=['1月','2月','3月']
  // 设置 y轴数据
  let yData=['20312','12542','45812']
  let option = {
    title:{
      text:'第一季度收益状况'
    },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: xData,
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '收益',
      type: 'bar',
      barWidth: '30%',
      color:'orange',
      data: yData
    }
  ]
};
// 二季度
let x1Data=['4月','5月','6月']
  // 设置 y轴数据
  let y1Data=['40132','31256','62012']
  let option1 = {
    title:{
      text:'第二季度收益状况'
    },
    tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: x1Data,
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '收益',
      type: 'bar',
      barWidth: '30%',
      color:'green',
      data: y1Data
    }
  ]
};
// 三季度
let x2Data=['7月','8月','9月']
  // 设置 y轴数据
  let y2Data=['34132','51256','22012']
  let option2 = {
    title:{
      text:'第三季度收益状况'
    },
    tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: x2Data,
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '收益',
      type: 'bar',
      barWidth: '30%',
      data: y2Data
    }
  ]
};
// 四季度
let x3Data=['10月','11月','12月']
  let y3Data=['20132','31256','12012']
  let option3 = {
    title:{
      text:'第四季度收益状况'
    },
    tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: x3Data,
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '收益',
      type: 'bar',
      barWidth: '30%',
      color:'purple',
      data: y3Data
    }
  ]
};
container.setOption(option)
container1.setOption(option1)
container2.setOption(option2)
container3.setOption(option3)
}
}
</script>

<style scoped> 
.container {
  width: 50%;
  height: 300px;
}
.el-card {
  width: 100%;
  padding: 30px 10px;
  box-sizing: border-box;
}
.box_money {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-around;
}
.header {
  width: 100%;
  height: auto;
  padding: 30px 0;
  display: flex;
  justify-content: space-around;
}
.box {
  width: 350px;
  height: 180px;
  background-color: pink;
  box-shadow:0 0 10px 6px rgb(234, 154, 167);
  border-radius: 30px;
  font-size: 50px;
  position: relative;
}
.el-icon {
  float: right;
  margin-right: 20px;
  margin-top: 8px;
  font-size: 100px;
  font-weight: bold;
}
.money{
  background-color: lightgreen;
  box-shadow:0 0 10px 6px rgb(144, 206, 153);
}
.num {
  background-color: skyblue;
  box-shadow:0 0 10px 6px rgb(134, 183, 196);
}
.text {
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 26px;
  height: 76px;
  padding: 10px;
  font-weight: bold;
  position: absolute;
  bottom: 10px;
  left: 20px;
}
</style>